<template>
    <div class="courseItemPage">
        <div class="pic">
            <img :src="data.img" alt="">
        </div>
        <div class="courseinfo">
            <p class="title">{{data.title}}</p>
            <div class="time">
                <span>{{data.time}}</span>
                <span>{{data.effect}}</span>
            </div>
            <div class="weizhi">
                <span>{{data.level}}</span>
                <span>{{data.weizhi}}</span>
            </div>
            <p class="num">已有{{data.num}}人参与</p>
        </div>
        
    </div>
</template>

<script>
export default {
    props:['data'],
   
    
}
</script>

<style lang="less" scoped>
.courseItemPage{
    width: 100%;
    padding: 0.2rem 0.15rem 0;
    box-sizing: border-box;
    position: relative;
    
    img{
        width: 100%;
        height: 100%;
    }
    .courseinfo{
        width: 96%;
        height: 93%;
        position: absolute;
        background: rgba(0,0,0,.12);
        top: 0;
        left: 0;
        box-sizing: border-box;
        margin: 0.2rem 0.15rem;
        padding: 0.4rem 0.6rem;
        .title{
            color: #fff;
            font-size: 0.48rem;
            letter-spacing: 2px;
            margin-bottom: 0.2rem;
        }
        .time,.weizhi{
            margin-bottom: 0.2rem;
        }
        span{
            color:#eee;
            margin-right: 0.3rem;
            font-size: 0.32rem;
        }
        .num{
            color:#eee;
            position: absolute;
            bottom: 0.3rem;
            right: 0.3rem;
            font-size: 0.32rem;
        }
    }
   
}
</style>